<template>
  <div>
    <div>
      <div>
        总得分： {{sum}}
      </div>
      <div><button @click="clearPane">重新开始</button></div>
    </div>
    <div id="game" @keydown="move" tabindex="0">
      <div v-for="(index) in 4" :key="index" class="column">
        <div v-for="(indexj) in 4" :key="indexj" class="grid" :id="forIndexj(index,indexj)">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {Base64} from "js-base64";

  export default {
    name: "Main",
    data(){
      return {
        publicPath: process.env.BASE_URL,
        sum: 2,
        empty: [
          [1,1,1,1],
          [1,1,1,1],
          [1,1,1,1],
          [1,1,1,1],
        ],
        init: {
          x: 0,
          y: 0
        },
        image: [{
            path: "http://localhost:8080" + require('../assets/img/num2.png'),
            val: 2
          }, {
            path: "http://localhost:8080" + require('../assets/img/num4.png'),
            val: 4,
          }, {
            path: "http://localhost:8080" + require('../assets/img/num8.png'),
            val: 8
          }, {
            path: "http://localhost:8080" + require('../assets/img/num16.png'),
            val: 16
          }, {
            path: "http://localhost:8080" + require('../assets/img/num32.png'),
            val: 32
          }, {
            path: require('../assets/img/num64.png'),
            val: 64
          }, {
            path: "http://localhost:8080" + require('../assets/img/num128.png'),
            val: 128
          }, {
            path: "http://localhost:8080" + require('../assets/img/num256.png'),
            val: 256
          }, {
            path: "http://localhost:8080" + require('../assets/img/num512.png'),
            val: 512
          }, {
            path: "http://localhost:8080" + require('../assets/img/num1024.png'),
            val: 1024
          }, {
            path: "http://localhost:8080" + require('../assets/img/num2048.png'),
            val: 2048
          },],
      }
    },
    mounted(){
      let div = document.getElementById('game');
      div.focus();
      this.initLoc();
    },
    methods: {
       dupHandle(num1, num2){
         if(this.empty[num1][num2] === 0){
           num1 = Math.floor(Math.random() * 4);
           num2 = Math.floor(Math.random() * 4);
           this.dupHandle(num1, num2);
         }else{
           this.init.x = num1;
           this.init.y = num2;
         }
       },
      initLoc(){
        this.forIndexj();
        let x1 = Math.floor(Math.random() * 4);
        let y1 = Math.floor(Math.random() * 4);
        this.dupHandle(x1, y1);
        let id1 = "div" + parseInt(this.init.x + 1) + "" + parseInt(this.init.y + 1);
        let div1 = document.getElementById(id1);
        let img = document.createElement("img");
        img.src = this.image[0].path;
        div1.appendChild(img);
      },
      initValue(){
        let divId = "div";
        let flag = false;
        for(let i = 0; i < 4; i++){
          for(let j = 0; j < 4; j++){
            divId += parseInt(i + 1) + "" + parseInt(j + 1);
            let temp = document.getElementById(divId);
            if(temp.childNodes.length === 1){
              this.empty[i][j] = 0;
            }else{
              flag = true;
              this.empty[i][j] = 1;
            }
            divId = "div";
          }
        }
        if(!flag){
          alert("游戏结束！");
          this.empty = [
            [1, 1, 1, 1],
            [1, 1, 1, 1],
            [1, 1, 1, 1],
            [1, 1, 1, 1],
          ]
          this.clearPane();
        }
        this.sum += 2;
      },
      clearPane(){
         let id = "div";
         this.sum = 2;
         for(let i = 1; i <= 4; i++){
           for(let j = 1; j <= 4; j++){
             id += i + "" + j;
             console.log(id);
             let temp = document.getElementById(id);
             if(temp.childNodes.length === 1){
               temp.removeChild(temp.firstChild);
             }
             id = "div";
           }
         }
         this.initLoc();
      },
      forIndexj(event, index) {
        return "div" + event + index;
      },
      rule(i, j, count, dir){
        let id1 = "div" + i + j;
        let id2 = "div";
        switch (dir) {
          case 'left':id2 +=  i +""+ parseInt(j + 1);break;
          case 'right':id2 +=  i +""+ parseInt(j - 1);break;
          case 'up':id2 += parseInt(i + 1) +""+ j;break;
          case 'down':id2 += parseInt(i - 1) +""+ j;break;
        }
        let div1 = document.getElementById(id1);
        let div2 = document.getElementById(id2);
        //创建可能添加的新图片节点
        if(div2.childNodes.length === 1){//获得存在图片的div
          let img2 = div2.children[0];//获得当时div2上的img节点
          if(div1.childNodes.length === 1){//移动方向前方一格存在图片
            let img1 = div1.children[0];//获得当时div1上的img节点
            let value1 = 0, value2 = 0;
            for(let index = 0; index < this.image.length; index++){
              if(this.image[index].path === img1.src){
                value1 = this.image[index].val;
              }
              if(this.image[index].path === img2.src){
                value2 = this.image[index].val;
              }
              if(value1 !== 0 && value2 !== 0){
                break;
              }
            }
            //图像一致
            if(value1 === value2){
              switch (2 * value1) {
                case 4: img1.src = this.image[1].path;break;
                case 8: img1.src = this.image[2].path;break;
                case 16: img1.src = this.image[3].path;break;
                case 32: img1.src = this.image[4].path;break;
                case 64: img1.src = this.image[5].path;break;
                case 128: img1.src = this.image[6].path;break;
                case 256: img1.src = this.image[7].path;break;
                case 512: img1.src = this.image[8].path;break;
                case 1024: img1.src = this.image[9].path;break;
                case 2048: img1.src = this.image[10].path;break;
              }
              div2.removeChild(img2);
            }else{//图像不一致

            }
          }else{//前方一格无图片
            div2.removeChild(img2);
            let id = "div";
            let ID = "div";
            switch (dir) {
              case 'left':
                id += i  +""+ parseInt(j - count);
                ID += i  +""+ parseInt(j - count - 1);
                break;
              case 'right':
                id += i +""+ parseInt(j + count);
                ID += i +""+ parseInt(j + count + 1);
                break;
              case 'up':
                id += parseInt(i - count) +""+ j;
                ID += parseInt(i - count - 1) +""+ j;
                break;
              case 'down':
                id += parseInt(i + count) +""+ j;
                ID += parseInt(i + count + 1) +""+ j;
                break;
            }
            let tempDiv = document.getElementById(id);
            let TempDiv = document.getElementById(ID);
            if(TempDiv !== null && TempDiv.childNodes.length === 1){
              let Img = TempDiv.children[0];
              let v1 = 0, v2 = 0;
              for(let index1 = 0; index1 < this.image.length; index1++){
                console.log(this.image[index1].path);
                if(Img.src === this.image[index1].path){
                  v1 = this.image[index1].val;
                }
                if(img2.src === this.image[index1].path){
                  v2 = this.image[index1].val;
                }
                if(v1 !== 0 && v2 !== 0){
                  break;
                }
              }
              //图像一致
              if(v1 === v2){
                switch (2 * v1) {
                  case 4: Img.src = this.image[1].path;break;
                  case 8: Img.src = this.image[2].path;break;
                  case 16: Img.src = this.image[3].path;break;
                  case 32: Img.src = this.image[4].path;break;
                  case 64: Img.src = this.image[5].path;break;
                  case 128: Img.src = this.image[6].path;break;
                  case 256: Img.src = this.image[7].path;break;
                  case 512: Img.src = this.image[8].path;break;
                  case 1024: Img.src = this.image[9].path;break;
                  case 2048: Img.src = this.image[10].path;break;
                }
              }else{
                tempDiv.appendChild(img2);
              }
            }else{
              tempDiv.appendChild(img2);
            }
          }
        }else{
          if(div1.childNodes.length === 1){
            count--;
          }
          count++;
        }
        return count;
      },
      exchangeGrid(dir){
        //记录前方的空格位
        let count = 0;
        switch (dir) {
          case 'left':
            for(let i = 1; i <= 4; i++){
              count = 0;
              for(let j = 1; j < 4; j++){
                count = this.rule(i, j, count, 'left');
              }
            }
            break;
          case 'right':
            for(let i = 1; i <= 4; i++){
              count = 0;
              for(let j = 4; j > 1; j--){
                count = this.rule(i, j, count, 'right');
              }
            }
            break;
          case 'up':
            for(let j = 1; j <= 4; j++){
              count = 0;
              for(let i = 1; i < 4; i++){
                count = this.rule(i, j, count, 'up');
              }
            }
            break;
          case 'down':
            for(let j = 1; j <= 4; j++){
              count = 0;
              for(let i = 4; i > 1; i--){
                count = this.rule(i, j, count,'down');
              }
            }
            break;
        }
      },
      move(event) {
        if (event.code === "ArrowRight") {
          this.exchangeGrid('right');
        } else if (event.code === "ArrowLeft") {
          this.exchangeGrid('left');
        } else if (event.code === "ArrowUp") {
          this.exchangeGrid('up');
        } else if (event.code === "ArrowDown") {
          this.exchangeGrid('down');
        }
        this.initValue();
        this.initLoc();
      },
    }
  }
</script>

<style scoped>
</style>